
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            width: 100%;
            height: 800px;
        }
        .math{
            width: 600px;
            height: 800px;
            margin: auto;
        }
        .title{
            text-align: center;
            height: 200px;
            width: 600px;
            line-height: 300px;
            font-size: 30px;
            font-weight: bold;
        }
        .main{
            background-color: #c59aae;
            box-shadow: 20px 20px 5px #c8baca;
            width: 600px;
            height: 500px;
            border: 1px solid  #c59aae;
        }
        .num1,.num2,.result{
            display: flex;
            margin: 50px auto;
            height: 70px;
            width: 550px;
            color: white;
        }
        .num2{
            margin-bottom: 15px;
        }
        .result{
            margin-top: 30px;
        }
        .num1text,.num2text,.resulttext{
            width: 100px;
            height: 30px;
            text-align: center;
            margin-top: 5px;
            font-size: 18px;
        }
        .num1input,.num2input{
            height: 40px;
        }
        .num11put,.num22put,.resultput{
            height: 40px;
            width: 410px;
            margin-left: 20px;
            border-radius: 5px;
            border: 0px;
        }
        .fuhao{
            display: flex;
            justify-content: space-around;
            height: 80px;
            width: 550px;
            margin:  auto;
        }
        /* .jia,.jian,.chen,.chu{
            background-color: white;
            height: 70px;
            width: 110px;
            text-align: center;
            line-height: 70px;
            border-radius: 5px;
        } */
        #jia,#jian,#chen,#chu{
            background-color: white;
            height: 70px;
            width: 110px;
            text-align: center;
            line-height: 70px;
            border-radius: 5px;
            border: 0px;
            outline: 0;
        }
       #firstnum,#secondnum,#result{
           padding-left: 10px;
           outline:0;
       }
    </style>
    <script>
        function calc(flag){
            var firstnum=document.getElementById("firstnum");
            var secondnum=document.getElementById("secondnum");
            var result=document.getElementById("result");
            if(flag=="+"){
                console.log("加法");
                var res=firstnum.value*1+secondnum.value*1;

            }else if(flag=="-"){
                console.log("减法");
                var res=firstnum.value*1-secondnum.value*1;
            }else if(flag=="*"){
                console.log("乘法");
                var res=firstnum.value*1*secondnum.value*1;
            }else{
                console.log("除法");
                var res=firstnum.value*1/secondnum.value*1;
            }
            result.value=res;

        }
    </script>
</head>
<body>
    <div class="container">
        <div class="math">
            <div class="title">计算器</div>
            <div class="main">
                <div class="num1">
                    <div class="num1text">第一个数：</div>
                    <div class="num1input"><input type="text" class="num11put" id="firstnum"></div>
                </div>
                <div class="num2">
                    <div class="num2text">第二个数：</div>
                    <div class="num2input"><input type="text" class="num22put" id="secondnum"></div>
                </div>
                <div class="fuhao">
                    <div class="jia"><input type="button" value="+" id="jia" onclick="calc('+')"></div>
                    <div class="jian"><input type="button" value="-" id="jian" onclick="calc('-')"></div>
                    <div class="chen"><input type="button" value="*" id="chen" onclick="calc('*')"></div>
                    <div class="chu"><input type="button" value="/" id="chu" onclick="calc('/')"></div>
                </div>
                <div class="result">
                    <div class="resulttext">结果：</div>
                    <div class="resultinput"><input type="text" class="resultput" id="result"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>